<div ng-controller="dishController">
    <div class="mer-head">
        <ul class="mer-title">
            <li><img src="{{constant.imgServer}}{{merchant.logo}}" alt="" ></li>
            <li><h3>{{merchant.mname}}</h3></li>
        </ul>
        <ul class="mer-info">
            <li><span class="fa fa-phone"></span>{{merchant.mtel}}</li>
            <li><span class="fa fa-star"></span>{{merchant.grade}}</li>
        </ul>
    </div>
    <div >
        <div class="row col-md-12 content">
            <div ng-repeat="dish in merchant.dish" class="col-sm-6 col-md-3">
                <div class="thumbnail " id="{{dish._id}}">
                    <img style="height: 180px;" src="{{constant.imgServer}}{{dish.img}}"
                         alt="..." class="picture-animation">

                    <div class="caption">
                        <h3 class="dname-style">{{dish.dname}}</h3>

                        <p class="price">
                            &yen;<span>{{dish.price}} </span>
                        </p>

                        <p>
                            <button class="btn btn-danger buy-btn" role="button"
                                    ng-click="addToCart(dish)">Buy
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="cartNav" href="" ng-click="toggle()">
            <i class="fa"></i>
        </div>
        <nav class="navbar-cart hide-animation" role="navigation" ng-hide="visible">
            <div class="cart-head">
                <h2>Shopping Cart</h2>
            </div>
            <!--<div class="cart-dishes">-->
            <div class="cart-dishes">
                <table class="table table-hover" id="cart-table">

                    <tr class="dish" id="dIdw" ng-repeat="c in cart">

                        <td class="dish-img">
                            <div>
                                <img src="{{constant.imgServer}}{{c.img}}">
                            </div>
                        </td>
                        <td class="dish-info">
                            <p>{{c.dname}}</p>
                            <p>
                                &yen;<span class="dish-price">{{c.price}}</span>
                            </p>
                        </td>
                        <td class="dish-count"><span class="mines" ng-click="updateCart($index,'reduce')"
                        >-</span> <input
                                class="counts" value="{{c.num}}"
                                onkeyup="update('mId', 'dId', this.value)">
						<span class="plus"
                              ng-click="updateCart($index,'add')">+</span></td>
                    </tr>

                </table>
                <hr>
                <div class="checkout">
                    <div class="total">Total: &yen;{{total}}</div>
                    <div class="pay">
                        <a style="text-decoration: none; color: #D64B2A"
                           href="#/order/checkoutOrder/{{merchant._id}}">Check
                            Out</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>
